<nz-page-header [nzGhost]="false" class="px-0">
  <nz-page-header-title>概览</nz-page-header-title>
</nz-page-header>
<nz-card>
  <h4>组织名称</h4>
  <div class="card-content">
    <p nz-typography nzEditable [(nzContent)]="organizationDetails.name"
       (nzContentChange)="updateOrganizationName();"></p>
  </div>
</nz-card>
<div class="mt-4"></div>
<nz-card>
  <h4>组织所有者</h4>
  <div class="card-content">
    <nz-skeleton [nzLoading]="loadingName" [nzActive]="true" [nzParagraph]="{rows: 3}">
      <p nz-typography>{{organizationDetails.owner_name}}</p>
      <div>
        <nz-space class="align-items-center">
          <span *nzSpaceItem nz-icon nzType="mail" nzTheme="outline" nz-tooltip
                [nzTooltipTitle]="'电子邮件地址'"></span>
          <span *nzSpaceItem nz-typography>{{organizationDetails.email}}</span>
        </nz-space>
      </div>
      <div class="mt-2">
        <nz-space class="align-items-center" style="margin-left: -4px">
          <span *nzSpaceItem nz-icon nzType="phone" nzTheme="outline" nz-tooltip
                [nzTooltipTitle]="'联系电话'"></span>&nbsp;
          <span *nzSpaceItem>
            <nz-space class="align-items-center">
              <div *nzSpaceItem class="position-relative" style="min-height: 32px">

                <span *ngIf="organizationDetails.contact_number && !isNumberEditing" nz-typography
                      style="line-height: 32px">{{organizationDetails.contact_number}}</span>
                <span *ngIf="!organizationDetails.contact_number && !isNumberEditing" (click)="focusNumberInput()"
                      nz-typography class="text-btn">添加联系电话</span>

                <div *ngIf="isNumberEditing" class="number-input">
                  <input nz-input type="tel" placeholder="添加联系电话"
                         [(ngModel)]="organizationDetails.contact_number"
                         (input)="sanitizeContactNumber($event)"
                         (blur)="updateOwnerContactNumber();"
                         (keydown.enter)="updateOwnerContactNumber()"
                         maxlength="20" #numberInput/>
                </div>
              </div>
              <ng-container *nzSpaceItem>
                <ng-container *ngIf="organizationDetails.contact_number">
                  <span *ngIf="!isNumberEditing" (click)="focusNumberInput()" nz-icon nzType="edit"
                        nzTheme="outline" class="edit-btn"></span>
                </ng-container>
              </ng-container>
            </nz-space>
          </span>
        </nz-space>
      </div>
    </nz-skeleton>
  </div>
</nz-card>
<div class="mt-4"></div>
<nz-card>
  <h4>组织管理员</h4>
  <div class="card-content">
    <nz-skeleton [nzLoading]="loadingAdmins" [nzActive]="true" [nzParagraph]="{rows: 5}">
      <nz-table [nzNoResult]="" [nzData]="organizationAdmins" [nzPaginationType]="'small'" #adminsTable>
        <tbody>
        <tr *ngFor="let item of adminsTable.data">
          <td class="left-td">{{item.name}} <span nz-typography *ngIf="item.is_owner" nzType="secondary">(所有者)</span>
          </td>
          <td class="b-65">{{item.email}}</td>
        </tr>
        </tbody>
      </nz-table>
    </nz-skeleton>
  </div>
</nz-card>
